<template>
	<div class="conbox">
		<header class="header">
			<ul>
				<li v-bind:class="actives == index ? 'slectsdond' : '' " v-for="(item,index) in navtab" :key="index"
					@click="switchtab(index,item.type)">{{item.navtext}}
				</li>
			</ul>
		</header>
		<div class="content_list">
			<ul class="listtab">
				<li v-for="(item,index) in listcount" :key="index" @click="toDetail(item.create_user_id)">
					<div class="listtab_top">
						<div class="top_userimg">
							<img :src="item.user_picture" alt="">
						</div>
						<div class="top_useright">
							<p class="first_p">
								<span class="name">{{item.nick_name}}</span>
								<span class="lin_way">
                                            <img :src="constant.imgUrl+'common/telep.png'" alt="" class="line_phone">
                                            <img :src="constant.imgUrl+'design/weichat.png'" alt=""
												 class="line_phone">
                                        </span>
								<span class="righttext">25%</span>
							</p>
							<p class="second_p">
								<span>来自{{item.stats_type_name}}的转发</span>
								<span class="righttext">意向度</span>
							</p>
						</div>
					</div>
					<ul class="listtab_middle">
						<li v-if="type==1">
							<p>累计采购</p>
							<p>￥{{item.totalAmount}}</p>
						</li>
						<li v-if="type==1">
							<p>客单价</p>
							<p>￥{{item.unitPrice}}</p>
						</li>
						<li>
							<p>访问次数</p>
							<p>{{item.userTraceCount.pageView}}</p>
						</li>
						<li>
							<p>预约到店</p>
							<p>{{item.userTraceCount.prebookNum}}</p>
						</li>
					</ul>
					<div class="listtab_btom">
						<p v-if="type==1">上次购买：暂无</p>
						<p>最后访问：{{item.view_time_last*1000 | formatDate }}</p>
						<p>用户地区：{{item.full_address}}</p>
					</div>
				</li>
				<!--<uLiLoadMore :loadingType="loadingType" :status="loading"></uLiLoadMore>-->
				<p class="lodemore" v-if="listcount.length==0||loading=='nomore'">{{datatext}}</p>
			</ul>
		</div>
		<footer>
			<defooter ref="defooters" :activeIndex="3" />
		</footer>
	</div>
</template>
<script>
import { formatDate } from '@/utils/datatime'
import { managelist } from '@/api/materical'
import uniLoadMore from '@/components/uLi-load-more/uLi-load-more'
import Defooter from '@/pages/components/deFooter'
export default {
	name: 'management',
	filters: {
		formatDate(time) {
			let date = new Date(time)
			return formatDate(date, 'yyyy-MM-dd hh:mm')
		}
	},
	components: {
		uniLoadMore,
		Defooter
	},
	data() {
		return {
			constant: this.$constant,
			actives: 0,
			navtab: [
				{ navtext: '意向客户', type: 2 },
				{ navtext: '成交客户', type: 1 }
			],
			type: 1,
			page: 1,
			timer: null,
			listcount: [],
			loadingText: '加载中...',
			loadingType: 0, // 定义加载方式 0---contentdown  1---contentrefresh 2---contentnomore
			loading: 'nodata',
			datatext: '暂无数据'
		}
	},
	onLoad(opcation) {
		this.owner_user_id = opcation.owner_user_id
		this.getmangelist()
		uni.showLoading({
			title: '数据加载中'
		})
	},
	onPullDownRefresh() {
		this.loading = ''
		this.getmangelist()
		uni.showLoading({
			title: '数据刷新中'
		})
	},
	onReachBottom: function() {
		let that = this
		if (that.timer != null) {
			clearTimeout(that.timer)
		}
		that.timer = setTimeout(function() {
			that.getcasemore()
		}, 1000)
		// this.getcasemore();
	},
	mounted() {

	},
	methods: {
		// 导航切换
		switchtab(index, type) {
			this.actives = index
			this.type = type
			this.page = 1
			this.listcount = []
			this.getmangelist()
			uni.showLoading({
				title: '数据加载中'
			})
		},
		// 消息提示封装
		msg(msg) {
			uni.showToast({
				title: msg,
				icon: 'none'
			})
		},
		hideloading() {
			setTimeout(function() {
				uni.hideLoading()
			}, 500)
		},
		// 初始化数据加载
		getmangelist() {
			this.page = 1
			this.loadingType = 0
			uni.showNavigationBarLoading()
			let data = {
				type: this.type,
				limit: 10,
				page: this.page
			}
			managelist(data).then(res => {
				if (res.status == 'success') {
					if (res.data.data.length > 0) {
						let lists = res.data.data
						this.listcount = lists
						// uni.hideNavigationBarLoading()
						// uni.stopPullDownRefresh()
						// uni.hideLoading()
						this.loading = ''
					} else {
						this.loading = 'nodata'
					}
				} else {
					this.msg(res.errors.message)
					// uni.hideLoading()
					this.loading = 'nodata'
				}
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
				uni.hideLoading()
			})
		},
		// 加载更多数据
		getcasemore() {
			this.page++
			if (this.loadingType !== 0) { // loadingType!=0;直接返回
				return false
			}
			this.loadingType = 1
			uni.showNavigationBarLoading()
			uni.showLoading({
				title: '数据加载中'
			})
			let data = {
				type: this.type,
				limit: 10,
				page: this.page
			}
			managelist(data).then(res => {
				if (res.status == 'success') {
					this.loadingText = ''
					if (res.data.data.length > 0) {
						this.listcount = this.listcount.concat(res.data.data)
						this.loadingType = 0
					} else {
						this.loading = 'nomore'
						this.datatext = '没有更多数据了'
					}
					if (res.data.current_page == res.data.last_page) {
						this.loading = 'nomore'
						this.datatext = '没有更多数据了'
					}
				} else {
					uni.hideNavigationBarLoading()
					this.msg(res.message)
				}
				this.hideloading()
				uni.hideNavigationBarLoading()
			})
		},
		toDetail(id) {
			uni.navigateTo({  // 到客户详情页面
				url: `/pages/order/centerClientDatail?create_user_id=${id}`
			})
		}
	}
}
</script>

<style scoped lang="scss">
	.conbox{
		width: 100%;
		height: 100%;
		float: left;
		display: block;
		background: #F5F5F5;
	}
	.header{
		height: 90px;
		width: 100%;
		position: fixed;
		top: 0;
		background: #fff;
		line-height:90px;
		text-align: center;
		z-index: 99999;
		font-size: 30px;
		border-bottom: 1px solid #eee;
	}
	.header ul li{
		width: 50%;
		float: left;
		height: 100%;
		color:#999999;
		font-size: 30px;
		text-align: center;
		line-height: 90px;
		position: relative;
	}
	.slectsdond{
		color: #333333;
	}
	.header ul  .slectsdond::after{
		content: "";
		display: block;
		position: absolute;
		bottom: 0;
		left: calc(50% - 40px);
		width: 60px;
		height: 6px;
		background-color: #ffd11a;
		border-radius: 2px;
	}
	.content_list{
		width: 100%;
		height: auto;
		z-index: 0;
		position: absolute;
		margin-top: 110px;
		background: #F5F5F5;
	}
	.listtab{
		width: 92%;
		height: auto;
		margin-left: 4%;
		display: inline-block;
	}
	.listtab li{
		width: 95%;
		height: 412px;
		margin-top: 20px;
		background: white;
		padding: 15px;
		display: inline-block;
		border-radius: 20px;
	}
	.listtab_top{
		height: 120px;
		width: 100%;
		margin-top: 30px;
		float: left;
	}
	.top_userimg{
		float: left;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		border:2px solid #eeeeee;
	}
	.top_userimg img{
		width: 100%;
		height: 100%;
		float: left;
		border-radius: 50%;
	}
	.top_useright{
		float: left;
		margin-left: 19px;
		width: 78%;
	}
	.top_useright p{
		width: 100%;
		float: left;
	}
	.top_useright p span{
		float: left;
	}
	.lin_way{
		height: 30px;
		/* margin-left: 10px;*/
	}
	.lin_way img{
		float: left;
		height: 30px;
		width: 30px;
		margin-top: 8px;
		margin-left: 10px;
	}
	.top_useright p .righttext{
		float: right;
	}
	.top_useright p .name{
		font-size: 34px;
		color: #333333;
	}
	.first_p .righttext{
		font-size: 30px;
		color: #FF6900;
	}
	.second_p{
		font-size: 24px;
		margin-top: 20px;
		color: #999999;
	}
	.second_p .righttext{
		color: #333333;
	}
	.listtab_middle{
		width: 100%;
		height: auto;
		display: block;
		margin-top: 39px;
		float: left;
	}
	.listtab_middle li{
		width: 25%;
		height: 100%;
		float: left;
		font-size: 24px;
		color: #999999;
		margin-top: 0;
		padding: 0;
	}
	.listtab_middle li p:nth-child(2){
		margin-top: 15px;
		color: #333333;
	}
	.listtab_btom{
		height: auto;
		width: 100%;
		margin-top: 39px;
		float: left;
		color:#999999;
		font-size: 24px;
		background: url($imgUrl+'login/right.png') right center;
		background-repeat:no-repeat;
		background-size: 15px 28px;
	}
	.listtab_btom p{
		width: 90%;
		display: -webkit-box;
		word-break: break-all;
		/* autoprefixer: ignore next */
		-webkit-box-orient: vertical;
		/* autoprefixer: on */
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		line-height: 36px;
	}
	.lodemore{
		color: #999999;
		padding: 30px 0;
		text-align: center;
	}
</style>
